<template>
	<view class="ctcontent">
		<view style="height: 56px;"></view>
		<image class="img-dev" mode="aspectFit" src="@/static/img/dev_bg.png"></image>
		<view class="ct-play">
			<image @click="$dianji(ctlPlay, 1)" mode="widthFix" src="@/static/img/play_prev.png"></image>
			<image @click="$dianji(ctlPlay, playState == 3 ? 4 : 3)" mode="widthFix" :src="playState == 3 ? '/static/img/pause.png' : '/static/img/play.png' "></image>
			<image @click="$dianji(ctlPlay, 2)" mode="widthFix" src="@/static/img/play_next.png"></image>
		</view>
		<view class="sl-seekbar">
			<g-slider
			:modelValue="soundVal" 
			:sliderSize="16" 
			:movableSize="56"
			@touchUp="soundChange"
			slideBlockImg="/static/img/sound.png" :slideBlockImgSize="26"></g-slider>
			<g-slider 
			:modelValue="lightVal" 
			:sliderSize="16"
			:movableSize="56"
			@touchUp="lightChange"
			slideBlockImg="/static/img/light.png" :slideBlockImgSize="26"></g-slider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playState: 0, // 0为None 1停止 2暂停 3正在播放 7Error
				soundVal: 0,
				lightVal: 0
			}
		},
		onLoad() {
			this.getPlayState();
			uni.request({
			    url: '/api/getSoundLight',
			    success: (res) => {
					this.soundVal = res.data.sound;
					this.lightVal = res.data.light;
			    }
			});
		},
		methods: {
			getPlayState() {
				uni.request({
				    url: '/api/getPlayState',
				    success: (res) => {
						this.playState = res.data.state;
				    }
				});
			},
			ctlPlay(fg) {
				uni.request({
				    url: `/api/ctlPlay?flag=${fg}`,
				    success: (res) => {
						var msg = res.statusCode == 200 ? "操作成功" : "操作失败";
						uni.showToast({title: msg, icon:'none'});
						this.getPlayState();
				    }
				});
			},
			soundChange(e) {
				uni.request({
				    url: `/api/ctlSound?value=${e}`,
				    success: (res) => {
						
				    }
				});
			},
			lightChange(e) {
				uni.request({
				    url: `/api/ctlLight?value=${e}`,
				    success: (res) => {
						
				    }
				});
			}
		}
	}
</script>

<style>
	.img-dev {
		width: 100%;
		height: 250rpx;
	}

	.ct-play {
		display: flex;
		width: 260px;
		margin: 0px auto;
		padding-top: 26rpx;
		justify-content: space-around;
	}

	.ct-play image {
		width: 76rpx;
		height: 76rpx;
	}
	.sl-seekbar {
		display: flex;
		flex-direction: column;
		gap: 36rpx;
		padding: 66rpx 26rpx 0px 26rpx;
	}
</style>